<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
				/*
				 * 设置box1向左浮动
				 */
				float: left;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
				/*
				 * 由于受到box1浮动的影响，box2整体向上移动了100px
				 * 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
				 * clear可以用来清除其他浮动元素对当前元素的影响
				 * 可选值：
				 * 		none，默认值，不清除浮动
				 * 		left，清除左侧浮动元素对当前元素的影响
				 * 		right，清除右侧浮动元素对当前元素的影响
				 * 		both，清除两侧浮动元素对当前元素的影响
				 * 				清除对他影响最大的那个元素的浮动
				 */
				
				/*
				 * 清除box1浮动对box2产生的影响
				 * 清除浮动以后，元素会回到其他元素浮动之前的位置
				 */
				/*clear: left;*/
				float: right;
			}
			.box3{
				width: 300px;
				height: 300px;
				background-color: skyblue;
				
				clear: both;
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="box1"></div>
		
		<div class="box2"></div>
		
		<div class="box3"></div>
		
	</body>
</html>
